<template>
	<div class="toolbar-container">
		<div class="left-toolbar">
			<!-- <el-button-group size="small">
				<el-button
					:type="layoutType === 'PC' ? 'info' : ''"
					@click="changeLayout('PC')"
				>
					PC
				</el-button>
				<el-button
					:type="layoutType === 'PAD' ? 'info' : ''"
					@click="changeLayout('PAD')"
				>
					PAD
				</el-button>
				<el-button
					:type="layoutType === 'H5' ? 'info' : ''"
					@click="changeLayout('H5')"
				>
					H5
				</el-button>
			</el-button-group> -->
			<el-button link :type="hasGrid ? 'primary' : 'info'" @click="changeGrid">
				<!--  style="margin-left: 20px" -->
				<el-icon title="背景栅格"><Grid /></el-icon>
			</el-button>
			<el-button link type="primary" title="撤销" @click="optDatas('undo')">
				<el-icon><DArrowLeft /></el-icon>
			</el-button>
			<el-button link type="primary" title="重做" @click="optDatas('redo')">
				<el-icon><DArrowRight /></el-icon>
			</el-button>
		</div>

		<div class="right-toolbar">
			<div class="right-toolbar-con">
				<el-button link type="danger" @click="optDatas('empty')">
					清空
				</el-button>
				<el-button link type="info" @click="optDatas('preview')">
					预览
				</el-button>
				<el-button link type="primary" @click="optDatas('import')">
					导入
				</el-button>
				<el-button link type="primary" @click="optDatas('export')">
					导出
				</el-button>
				<el-button link type="success" @click="optDatas('save')">
					保存
				</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { DArrowLeft, DArrowRight, Grid } from '@element-plus/icons-vue'
import { ref, defineEmits } from 'vue'
import { useLayoutStore } from '@/store/modules/layout'

const emits = defineEmits(['changeConfig', 'optDatas'])
const layoutType = ref('PC')
const hasGrid = ref(true)
const layoutStore = useLayoutStore()

const changeLayout = (type: String) => {
	layoutType.value = type
	layoutStore.changeLayout(type)
	emits('changeConfig', { layoutType: type })
}

const changeGrid = () => {
	hasGrid.value = !hasGrid.value
	emits('changeConfig', { hasGrid: hasGrid.value })
}

const optDatas = (type: string) => {
	emits('optDatas', type)
}
</script>

<style lang="scss" scoped>
.toolbar-container:after {
	display: block;
	content: '';
	clear: both;
}

.left-toolbar {
	display: flex;
	margin-top: 8px;
	float: left;
	font-size: 16px;
}

.right-toolbar {
	display: flex;
	float: right;
	line-height: 40px;
	text-align: right;
	overflow: hidden;

	.right-toolbar-con {
		text-align: right;
		width: 600px;
	}

	:deep(.el-button) {
		margin-left: 10px;
	}

	:deep(.el-button--text) {
		font-size: 14px !important;
	}

	:deep(.svg-icon) {
		margin-left: 0;
		margin-right: 0.05em;
	}
}

.el-button i {
	margin-right: 3px;
}

.form-render-wrapper {
	//height: calc(100vh - 142px);
	//all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
}

.form-render-wrapper.h5-layout {
	margin: 0 auto;
	width: 420px;
	border-radius: 15px;
	//border-width: 10px;
	box-shadow: 0 0 1px 10px #495060;
	height: calc(100vh - 175px);
	overflow-y: auto;
	overflow-x: hidden;
}

.form-render-wrapper.pad-layout {
	margin: 0 auto;
	width: 960px;
	border-radius: 15px;
	//border-width: 10px;
	box-shadow: 0 0 1px 10px #495060;
	height: calc(100vh - 175px);
	overflow-y: auto;
	overflow-x: hidden;
}

.node-tree-drawer {
	:deep(.el-drawer) {
		padding: 10px;
		overflow: auto;
	}

	:deep(.el-drawer__header) {
		margin-bottom: 12px;
		padding: 5px 5px 0;
	}

	:deep(.el-drawer__body) {
		padding-left: 5px;
	}
}

/*.node-tree-scroll-bar {*/
/*  height: 100%;*/
/*  overflow: auto;*/
/*}*/

:deep(.node-tree) {
	.el-tree > .el-tree-node:after {
		border-top: none;
	}
	.el-tree-node {
		position: relative;
		padding-left: 12px;
	}

	.el-tree-node__content {
		padding-left: 0 !important;
	}

	.el-tree-node__expand-icon.is-leaf {
		display: none;
	}

	.el-tree-node__children {
		padding-left: 12px;
		overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
	}

	.el-tree-node :last-child:before {
		height: 38px;
	}

	.el-tree > .el-tree-node:before {
		border-left: none;
	}

	.el-tree > .el-tree-node:after {
		border-top: none;
	}

	.el-tree-node:before {
		content: '';
		left: -4px;
		position: absolute;
		right: auto;
		border-width: 1px;
	}

	.el-tree-node:after {
		content: '';
		left: -4px;
		position: absolute;
		right: auto;
		border-width: 1px;
	}

	.el-tree-node:before {
		border-left: 1px dashed #4386c6;
		bottom: 0px;
		height: 100%;
		top: -10px;
		width: 1px;
	}

	.el-tree-node:after {
		border-top: 1px dashed #4386c6;
		height: 20px;
		top: 12px;
		width: 16px;
	}

	.el-tree-node.is-current > .el-tree-node__content {
		background: #c2d6ea !important;
	}

	.el-tree-node__expand-icon {
		margin-left: -3px;
		padding: 6px 6px 6px 0px;
		font-size: 16px;
	}
}
</style>
